<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,div,ul,li,p{margin:0;padding:0;}
        body{font:12px/1.5 Arial;}
        ul{list-style-type:none;}
        #nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .subnav,#nav .subnav p,#nav .subnav p span,#nav .subnav .arrow{background:url(img/nav_bg.png) no-repeat;}
        #nav{position:relative;width:910px;background-position:0 -36px;margin:10px auto;}
        #nav ul{height:36px;line-height:36px;margin-left:10px;padding-right:10px;overflow:hidden;background-position:right -72px;}
        #nav ul li{float:left;width:110px;margin-left:-2px;background-position:0 -108px;}
        #nav ul li a{font-size:14px;color:#fff;width:102px;display:block;text-align:center;text-decoration:none;margin:0 2px 0 4px;}
        #nav ul li a:hover{font-weight:700;background-position:-3px -144px;}
        #nav .subnav{display:none;position:absolute;top:41px;width:auto!important;min-width:110px;height:27px;line-height:27px;white-space:nowrap;background-position:0 -180px;}
        #nav .subnav p{margin-left:10px;padding-right:10px;background-position:right -234px;}
        #nav .subnav p span{display:block;color:#235e99;background-repeat:repeat-x;background-position:0 -207px;}
        #nav .subnav p a{font-size:12px;display:inline;color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;}
        #nav .subnav p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;}
        #nav .subnav .arrow{position:absolute;top:-4px;display:block;width:11px;height:5px;background-position:0 -261px;}
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="javascript:;">站长之家</a></li>
        <li>
            <a href="javascript:;">行业资讯</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="javascript:;">业界动态</a>|
                        <a href="javascript:;">收购融资</a>|
                        <a href="javascript:;">门户动态</a>|
                        <a href="javascript:;">搜索引擎</a>|
                        <a href="javascript:;">网络游戏</a>|
                        <a href="javascript:;">电子商务</a>|
                        <a href="javascript:;">广告传媒</a>|
                        <a href="javascript:;">厂商开发</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">站长在线</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="javascript:;">站长报道</a>|
                        <a href="javascript:;">好站推荐</a>|
                        <a href="javascript:;">站长聚会</a>|
                        <a href="javascript:;">站长访谈</a>|
                        <a href="javascript:;">站长茶馆</a>|
                        <a href="javascript:;">网站排行</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">网站运营</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="javascript:;">建站经验</a>|
                        <a href="javascript:;">策划盈利</a>|
                        <a href="javascript:;">搜索优化</a>|
                        <a href="javascript:;">网站推广</a>|
                        <a href="javascript:;">免费资源</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">设计在线</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="javascript:;">酷站推荐</a>|
                        <a href="javascript:;">网页设计</a>|
                        <a href="javascript:;">WEB标准</a>|
                        <a href="javascript:;">视频处理</a>|
                        <a href="javascript:;">设计活动</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">网络编程</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="javascript:;">Asp编程</a>|
                        <a href="javascript:;">Php编程</a>|
                        <a href="javascript:;">.Net编程</a>|
                        <a href="javascript:;">Xml编程</a>|
                        <a href="javascript:;">Access</a>|
                        <a href="javascript:;">Mssql</a>|
                        <a href="javascript:;">Mysql</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">联盟资讯</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="javascript:;">联盟动态</a>|
                        <a href="javascript:;">联盟介绍</a>|
                        <a href="javascript:;">联盟点评</a>|
                        <a href="javascript:;">网赚技巧</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">服务器</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>
                    <span>
                        <a href="javascript:;">Web服务器</a>|
                        <a href="javascript:;">Ftp服务器</a>|
                        <a href="javascript:;">Mail服务器</a>|
                        <a href="javascript:;">Dns服务器</a>|
                        <a href="javascript:;">Win服务器</a>|
                        <a href="javascript:;">Linux服务器</a>|
                        <a href="javascript:;">安全防护</a>|
                        <a href="javascript:;">虚拟主机</a>
                    </span>
                </p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>
<script>
    //第一步，永远是选择要操作的元素
    var oNav = document.querySelector('#nav');
    var aLi = document.querySelectorAll('#nav ul li');
    var aSubNav = document.querySelectorAll('#nav ul li .subnav');
    var aEm = document.querySelectorAll('.arrow');
    var timer = null;
    var oSubNav = null;
    var oEm = null;
    //第二步的话，就要考虑循环发生事件对象，给他们添加回调函数
    for(var i=1;i<aLi.length;i++){
        //首先把下标记录一下
        aLi[i].index = i;
        //计算下当前subnav的下标

        //事件
        aLi[i].onmouseover = function(){
            //找到当前发生事件li下面的subnav
            oSubNav = aSubNav[this.index -1];
            //找到那个小图标
            oEm = aEm[this.index - 1];

            for(var i=0;i<aSubNav.length;i++){
                aSubNav[i].style.display = 'none';
            }
            //让当前的li下边的那个subnav显示
            oSubNav.style.display = 'block';

            //清除下计时器
            clearTimeout(timer);
            //位置判断一下
            oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ?
                    //居左
                    oSubNav.style.left = this.offsetLeft + 'px' :
                    //居右
                    oSubNav.style.right = '0';

            //em那个小图标
            oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + 'px';
        }
        //事件
        aLi[i].onmouseout = function(){
            //离开的时候
            timer = setTimeout(function(){
                oSubNav.style.display = 'none';
            },300)
        }
    }

</script>